<template>
	<div class="getDaily">
		<div class="title" v-if="isMember == false">日报内容</div>
		<table align="center" class="mailTable">
			<tr>
				<td class="column">姓名</td>
				<td class="nrkd">{{ name }}</td>
				<td class="column">日期</td>
				<td class="nrkd">{{ myDailyList.reportDate }}</td>
			</tr>
			<tbody v-for="item in myDailyList.dailyReportList">
				<tr>
					<td class="column">项目</td>
					<td class="nrkd">{{ item.projectName }}</td>
					<td class="column">工时</td>
					<td class="nrkd">{{ item.workHours }}小时</td>
				</tr>
				<tr>
					<td class="column">工作内容</td>
					<td class="grid-contents " colspan="3" @click="wrapClick($event, item.content)"  v-html="item.content"></td>
				</tr>
			</tbody>
		</table>

		<div class="title titleTow" v-if="annotateList.length > 0">批注</div>
		
			<table align="center" class="mailTable" v-for="(item, index ) in annotateList" :key="index"  v-if="annotateList.length > 0">
					<tr>
						<td class="column" style="color:#BE1A21;">批注人</td>
						<td class="nrkd">{{ item.annotateUser }}</td>
						<td class="column" style="color:#BE1A21;">批注时间</td>
						<td class="nrkd">{{ item.annotateTime }}</td>
					</tr>
					<tr>
						<td class="column" style="color:#BE1A21;">批注内容</td>
						<td class="nrkd " colspan="3">{{ item.annotateContent }}</td>
					</tr>
			</table>
		<div class="buttom" v-if="isMember == true && myDailyList.userId != userId">
			<el-form label-position="top" label-width="80px" :rules="rules" :model="formData" ref="dailysRef">
				<el-form-item label="批注" prop="annotateContent"><el-input v-model="formData.annotateContent" :rows="4" type="textarea" placeholder="请输入" /></el-form-item>
			</el-form>
		</div>


		<div class="bigImg" v-if="isBigImg">
			<div class="close" @click="closeImg">
				<el-icon :size="40" color="#ffffff"><Close /></el-icon>
			</div>
			<img ref="bigImg" :src="imgSrc" alt="" @wheel="imgWheel"/>
		</div>
	</div>
</template>
<script setup>
import mydailyStore from '@/store/modules/mydaily';
import { getReportByDate, saveComments, editComments } from '@/api/dailyReport';
import useUserStore from '@/store/modules/user';
import { resize } from 'dom7';
const emit = defineEmits(['closeTab', 'isSubmit']);
const { proxy } = getCurrentInstance();
const store = mydailyStore();
const useStore = useUserStore();
const date = computed(() => {
	return store.date;
});
//const formDatas = ref({});
const props = defineProps({
	myDailyList: {
		type: Object,
		default: ''
	},
	isMember: {
		type: Boolean,
		default: false
	},
	isSubmit: {
		type: Boolean,
		default: false
	}
});
const data = reactive({
	formData: {
		annotateContent: null,
		reportId: null
	},
	rules: {
		annotateContent: [{ required: true, message: '批注内容不能为空', trigger: 'blur' }]
	}
});
const { myDailyList, isMember, isSubmit } = toRefs(props);
const { formData, rules } = toRefs(data);
let name = ref(null);
let annotateContent = ref(null);
let annotateUser = ref(null);
let annotateTime = ref(null);
let imgSrc = ref(null);
const isBigImg = ref(false);
const userId = ref(useStore.userId);
const userName = ref(useStore.name);
const detailuseName = ref(null);
const annotateList = ref([]);
const getAlldata = data => {
	let param = {
		date: data
	};
	getReportByDate(param).then(res => {
		if (res.code === 200) {
			formDatas.value = res.data;
			if (res.data.dailyReportList.length > 0) {
				name.value = res.data.dailyReportList[0].createBy;
			}
			detailuseName.value = res.data.userName ? res.data.userName : null;
			if (res.data.annotateList && res.data.annotateList.length > 0) {
				annotateList.value = res.data.annotateList;
			}
			// annotateContent.value = res.data.annotateContent ? res.data.annotateContent : null;
			// annotateUser.value = res.data.annotateUser ? res.data.annotateUser : null;
			// annotateTime.value = res.data.annotateTime ? res.data.annotateTime : null;
		}
	});
};
const addComments = () => {
    proxy.$refs['dailysRef'].validate((valid) => {
		if (valid) { 
			if (formData.value.id) {
				editComments(formData.value).then(res => {
					if (res.code == '200') {
						proxy.$modal.msgSuccess("修改批注成功");
						emit('closeTab', false);
					}
				})
			} else {
				saveComments(formData.value).then(res => {
					if (res.code == '200') {
						proxy.$modal.msgSuccess("批注成功");
						emit('closeTab', false);
					}

				})
			}
            
        } else {
            emit('isSubmit', false);
        } 
    })
}
const getImgSrc = (richtext) => {
	 if (richtext.indexOf('src="') != -1) {
		if (richtext.indexOf('http') != -1 || richtext.indexOf('https') != -1) {
			return richtext;
		}
		richtext = richtext.replaceAll('src="', 'src="' + import.meta.env.VITE_APP_BASE_API + '');
	}
	return richtext;
}

const wrapClick = (e,center) => {
	if (e.target.tagName == 'IMG') {
		let src = e.target.currentSrc;
		imgSrc.value = src;
		isBigImg.value = true;
	}
}

const closeImg = () => {
	imgSrc.value = null;
	isBigImg.value = false;
}
const count = ref(10);
const imgWheel = (e) => {
	if (imgSrc.value) {
		var zoom = parseInt(proxy.$refs['bigImg'].style.zoom, 10) || 100;
		zoom += event.wheelDelta / 12;
		if (zoom > 0) {
			proxy.$refs['bigImg'].style.zoom = zoom + '%';
		} 
		
	}
	return false;
}

watch(myDailyList, (newV, oldV) => {
	if (newV) {
		annotateList.value = [];
		formData.value = {};
        if (newV.dailyReportList && newV.dailyReportList.length > 0) {
            name.value = newV.dailyReportList[0].createBy;
			newV.dailyReportList.map(item => {
				item.content = getImgSrc(item.content)
            })
		}
		if (newV.annotateList && newV.annotateList.length > 0) {
			if (isMember.value == true) {
				newV.annotateList.map(item => {
					if (item.annotateUser == userName.value) {
						formData.value.annotateContent = item.annotateContent ? item.annotateContent : "";
						formData.value.id = item.id;
					} else {
						annotateList.value.push(item);
					}
				})
			} else {
				annotateList.value = newV.annotateList;
			}
		}
        detailuseName.value = newV.userName ? newV.userName : null;
        if (newV.id) {
            formData.value.reportId = newV.id;
        }
    }
}, { immediate: true });
watch(isSubmit, (newV, oldV) => {
    if (newV == true) {
        addComments(); 
    }
}, { immediate: true })

</script>

<style lang="scss" scoped>
$fontSize: 14px;
$color: #be1a21;
$display: flex;
$alignItems: center;
$justifyContent: center;
.getDaily {
	max-height: 560px;
	overflow-y: auto;
	padding-right: 10px;
	.title {
		width: 159px;
		height: 32px;
		background: url('../../assets/images/spbj.png') center center no-repeat;
		background-size: 100% auto;
		color: $color;
		display: $display;
		align-items: $alignItems;
		padding-left: 10px;
		margin: 15px 0;
	}
	.titleTow {
		margin: 30px 0px 15px 0px !important;
	}
	table {
		width: 100%;
		border-right: 1px solid rgba(0, 0, 0, 0.15);
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
		border-collapse: collapse;
		.getDailyDiv {
			width: 100%;
		}
		tr {
			width: 100%;
			td {
				min-height: 40px;
				border-top: 1px solid rgba(0, 0, 0, 0.15);
				border-left: 1px solid rgba(0, 0, 0, 0.15);
				:deep(img) {
					width: 200px !important;
					object-fit: contain;
					cursor: pointer;
				}
				line-height: 23px !important;
			}
		}
	}
	.buttom {
		margin: 45px auto 15px auto;
		.bottom {
			display: flex;
			justify-content: end;
			align-items: center;
		}
	}
}
.bg-purple-light {
	width: 100%;
	.bg-purple {
		background: #f7f7f7;
		width: 20%;
		padding-right: 10px;
		font-weight: bold;
		text-align: center;
		font-size: 14px;
		color: #999999;
	}
	.grid-content {
		width: 30%;
		min-height: 40px;
		height: 40px;
		color: #1e1e1e;
		font-weight: 400;
		line-height: 40px;
		padding-left: 22px;
	}
	.grid-contents {
		min-height: 100px;
		padding-left: 22px;
		img{
			cursor: pointer;
		}

	}
}
.addPublish {
	background: $color;
	border-color: $color;
	color: #ffffff;
}
.bigImg{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.45);
	overflow-y: auto;
	.close{
		width: 50px;
		height: 50px;
		position: absolute;
		top: 40px;
		right: 40px;
		cursor: pointer;
		background-color: #606266;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	img{
		min-width: 500px;
		max-width: 1800px;
		max-height: 900px;
		
	}
}
</style>
